<!-- 创建时间: 2021年09月26日 星期天 21:35 -->
<template>
    <div class="countDown_container">
        <div id="countdown">
            <div id="tiles">
                <span v-if="timeControl[0]"> {{ setTime[0] }} </span>
                <span v-if="timeControl[1]"> {{ setTime[1] }} </span>
                <span v-if="timeControl[2]"> {{ setTime[2] }} </span>
                <span v-if="timeControl[3]"> {{ setTime[3] }} </span>
            </div>
            <div class="labels">
                <li v-if="timeControl[0]">Days</li>
                <li v-if="timeControl[1]">Hours</li>
                <li v-if="timeControl[2]">Mins</li>
                <li v-if="timeControl[3]">Secs</li>
            </div>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    props: ["timeControl", "setTime"],
    data () {
        //这里存放数据
        return {};
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        /**
         * 此方法以供调用者使用，计算出时间差并返回倒讲时
         * datetimeTo 日期时间
         */
        getTimeLeft (siming) {
            // 计算目标与现在时间差（毫秒）
            let startTime = new Date().getTime();
            let endTime = siming.getTime();
            let mss = endTime - startTime;
            // 将时间差（毫秒）格式为：天时分秒
            let days = parseInt(mss / (1000 * 60 * 60 * 24));
            let hours = parseInt(
                (mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
            );
            let minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
            let seconds = parseInt((mss % (1000 * 60)) / 1000);
            return {
                days,
                hours,
                minutes,
                seconds,
            };
            // return days + "天" + hours + "时" + minutes + "分" + seconds + "秒";
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created () { },

    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted () { },
    //当data中定义的数据有变化时就会加载updated方法
    updated () { },
};
</script>

<style lang="scss" scoped>
//@import url(); 引入公共css类
.countDown_container {
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;

    body {
        font: normal 13px/20px Arial, Helvetica, sans-serif;
        word-wrap: break-word;
        color: #eee;
        background: #353535;
    }

    #countdown {
        width: 465px;
        height: 112px;
        text-align: center;
        background: #222;
        background-image: -webkit-linear-gradient(top, #222, #333, #333, #222);
        background-image: -moz-linear-gradient(top, #222, #333, #333, #222);
        background-image: -ms-linear-gradient(top, #222, #333, #333, #222);
        background-image: -o-linear-gradient(top, #222, #333, #333, #222);
        border: 1px solid #111;
        border-radius: 5px;
        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);
        margin: auto;
        padding: 24px 0;
        position: relative; // top: 0;
        // bottom: 0;
        // left: 0;
        // right: 0;
    }

    #countdown:before {
        content: '';
        width: 8px;
        height: 65px;
        background: #444;
        background-image: -webkit-linear-gradient(top, #555, #444, #444, #555);
        background-image: -moz-linear-gradient(top, #555, #444, #444, #555);
        background-image: -ms-linear-gradient(top, #555, #444, #444, #555);
        background-image: -o-linear-gradient(top, #555, #444, #444, #555);
        border: 1px solid #111;
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
        display: block;
        position: absolute;
        top: 48px;
        left: -10px;
    }

    #countdown:after {
        content: '';
        width: 8px;
        height: 65px;
        background: #444;
        background-image: -webkit-linear-gradient(top, #555, #444, #444, #555);
        background-image: -moz-linear-gradient(top, #555, #444, #444, #555);
        background-image: -ms-linear-gradient(top, #555, #444, #444, #555);
        background-image: -o-linear-gradient(top, #555, #444, #444, #555);
        border: 1px solid #111;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        display: block;
        position: absolute;
        top: 48px;
        right: -10px;
    }

    #countdown #tiles {
        position: relative;
        z-index: 1;
    }

    #countdown #tiles > span {
        width: 92px;
        max-width: 92px;
        font: bold 48px 'Droid Sans', Arial, sans-serif;
        text-align: center;
        color: #111;
        background-color: #ddd;
        background-image: -webkit-linear-gradient(top, #bbb, #eee);
        background-image: -moz-linear-gradient(top, #bbb, #eee);
        background-image: -ms-linear-gradient(top, #bbb, #eee);
        background-image: -o-linear-gradient(top, #bbb, #eee);
        border-top: 1px solid #fff;
        border-radius: 3px;
        box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7);
        margin: 0 7px;
        padding: 18px 0;
        display: inline-block;
        position: relative;
    }

    #countdown #tiles > span:before {
        content: '';
        width: 100%;
        height: 13px;
        background: #111;
        display: block;
        padding: 0 3px;
        position: absolute;
        top: 41%;
        left: -3px;
        z-index: -1;
    }

    #countdown #tiles > span:after {
        content: '';
        width: 100%;
        height: 1px;
        background: #eee;
        border-top: 1px solid #333;
        display: block;
        position: absolute;
        top: 48%;
        left: 0;
    }

    #countdown .labels {
        width: 100%;
        height: 25px;
        text-align: center;
        position: absolute;
        bottom: 8px;
    }

    #countdown .labels li {
        width: 102px;
        font: bold 15px 'Droid Sans', Arial, sans-serif;
        color: #f47321;
        text-shadow: 1px 1px 0px #000;
        text-align: center;
        text-transform: uppercase;
        display: inline-block;
    }
}
</style>
